<%--
  Created by IntelliJ IDEA.
  User: 123456
  Date: 2023/5/25
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
        }

        body {
            height: 100%;
            cursor: default;
            display: flex;
            flex-direction: column;
        }

        header {
            position: relative;
            display: block;
            width: 100%;
            height: 100px;
            background-color: black;
            /* position: fixed; */
            /* z-index: 100; */
        }

        .title {
            /* padding: auto; */
            position: absolute;
            color: white;
            font-size: 50px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 90px;
            left: 33px;
        }

        .tables {
            position: absolute;
            width: 60%;
            height: 100%;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table {
            width: 20%;
            height: 100%;
            color: white;
            background-color: black;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }

        .table:hover {
            background-color: rgb(107, 105, 105);
        }

        .user {
            /* position: absolute; */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 100px;
            /* background-color: red; */
            right: 0;
            color: white;
        }

        .user img {
            width: 80px;
            height: auto;
            border-radius: 50%;
        }

        .top {
            width: 100%;
            height: 400px;
            background-color: antiquewhite;
            background-image: url("img/books(2).jpg");

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .introduce{
            width: 800px;
            height: 300px;
            border: 1px solid;
            border-radius: 20px;
            background-color: rgba(128, 128, 128, 0.367);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            color: white;
            padding: 20px;
            box-sizing: border-box;
        }

        .main {
            height: 800px;
            width: 100%;
            background-color: antiquewhite;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .s_introduce{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .box{
            width: 50%;
            height: 70%;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box2 img{
            width: 300px;
            height: 300px;
        }

        .go{
            padding: 10px 20px;
            color: white;
            background-color: gray;
            border-radius: 30px;
            margin-top: 30px;
        }

    </style>
</head>

<body>
<header>
    <div class="title">
        BookCLUB
    </div>
    <div class="tables">
        <div class="table" onclick="toHome()">
            <div>首页</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>阅读</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>讨论</div>
        </div>
        <div class="user" onclick="toUser()">
            <img src="img/nullhead.png">
            <div style="margin: 10px;">
                <div style="margin: 10px;" id="getName">
                    <%=session.getAttribute("user")%>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="top">
    <div class="introduce" id="introduce">

    </div>
</div>
<div class="main">
    <div class="s_introduce">
        <div class="box">
            畅游思想的海洋，去阅读吧
            <div class="go" onclick="toBook()">go for it</div>
        </div>
        <div class="box2">
            <img src="img/desk.png">
        </div>
    </div>
    <div class="s_introduce">
        <div class="box2">
            <img src="img/bar.jpg">
        </div>
        <div class="box">
            感受思维的碰撞
            <div class="go" onclick="toBook()">go for it</div>
        </div>
    </div>
</div>
<form style="display: none" method="post" action="/BookList" id="BookList"></form>
</body>

</html>
<script>
    var words=[
        "用思想去战斗，而不应受思想的束缚而裹足不前。每人都有其独特的思维方式。",
        "智慧只在于一件事，就是认识那善于驾驭一切的思想",
        "怎样思想，就有怎样的生活。",
        "孩子的愿望是风的愿望，青春的思想是悠长的思想.",
        "知识，百科全书可以代替，可是考虑出的新思想、新方案，却是任何东西也代替不了的。",
        "应该坚信，思想和内容不是通过没头没脑的感伤，而是通过思考而得到的。",
        "思想虽然没有实体的，也要有个支点，一失去支点它就开始乱滚，一团糟地围着自己转;思想也忍受不了这种空虚。",
        "语言属于一个时代，思想属于许多时代。",
        "欲修其身者，先正其心；欲正其心者，先诚其意",
        "形式是一只金瓶，思想之花插入其内，便可流芳百世。",
        "一个人的活动，如果不是被高尚的思想所鼓舞，那它是无益的、渺小的。"
    ]
    window.onload=function(){
        var t=document.getElementById('getName').innerText;
        if(t.length>10){
            t=t.substring(0,9)+"...";
            document.getElementById('getName').innerText=t;
        }

        var ind=document.getElementById('introduce');//随机名言
        ind.innerText=words[Math.floor(Math.random() * words.length)] ;

    }
    allclick = function () {
        alert("没有资源！")
    }
    toHome=function (){
        window.location.href='Homepage.jsp';
    }
    toUser=function (){
        window.location.href='UserDetail.jsp';
    }
    toBook=function (){
        var b=document.getElementById('BookList');
        b.submit();
    }
</script>
